<template>
	<div class="app">
		<home></home>
		<h2>App: {{ message }}</h2>
		<button @click="message = ' hello world'">按钮</button>
	</div>
</template>

<script>
import Home from './components/Home.vue'
import { computed } from 'vue'

export default {
	components: {
		Home,
	},
	data() {
		return {
			message: 'hello App',
		}
	},
	// provide一般都是写成函数, 不让this不能指向vue实例
	provide() {
		return {
			name: 'why',
			age: 18,
			// computed() 返回值是一个ref对象, 如果需要拿到值, 需要.value获取
			message: computed(() => {
				return this.message
			}),
		}
	},
}
</script>

<style scoped></style>
